<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <link rel="stylesheet" type="text/css"  href="/elementUI/theme-chalk/index.css">
    <script>
        var screenWidth = document.documentElement.clientWidth;
        layui.use(['table'], function(){
            var table = layui.table ;
            table.render({
                id:'tableAll'
                ,elem: '#test'//绑定表格
                //数据来源
                ,url:'/work-template/getWorkTemplates'//绑定数据来源
                ,title: '工作模板'
                ,page: true
                ,width:screenWidth
                ,cellMinWidth:60
                ,where : {
                }
                ,cols: [
                    [
                        {field:'number', title:'编号',  fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                        ,{field:'content', title:'名称',  edit: 'text', minWidth:250, sort: true}
                        ,{field:'templateTypeName', title:'模板类型', edit: 'text'}
                        ,{field:'version', title:'版本',  sort: true}
                        ,{field:'drafter', title:'起草人',  sort: true,  templet:'<div>{{d.drafter.name}}</div>'}
                        ,{field:'reviewer', title:'审核人',  sort: true,  templet:'#reviewer'}
                        ,{field:'inputTime', title:'创建时间',templet:'<div>{{ layui.util.toDateString(d.inputTime, "yyyy-MM-dd") }}</div>'}
                        ,{fixed: 'right', title:'操作',minWidth:250, toolbar: '#barDemo'}
                    ]
                ]
            });
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit') {
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    parent.layer.open({
                        title: '工作模板',
                        type: 2,
                        content: '/work-template/workTemplateDetails?id=' + data.id,
                        area: ['1200px', '600px'],
                        shade: [0.3, '#393D49'],
                        shadeClose: false,
                        moveOut: true,
                    })
                }else if (obj.event === 'modify'){
                    window.location = '/work-template/createWorkTemplateContents?id=' + data.id
                }else if (obj.event === 'execution'){
                    parent.layer.open({
                        type: 1
                        ,title: '执行模板'
                        ,btn:['创建新项目','从以有项目中选择']
                        ,btnAlign: 'c'
                        ,shade: [0.3, '#393D49']
                        ,shadeClose: false
                        ,moveOut: true
                        ,btn1: function(index){
                            window.location = '/purchase/approveInitiatePurchaseProject';
                            parent.layer.close(index);
                        }
                        ,btn2: function () {
                            window.location = '/work-template/executionWorkTemplate?id='+data.id;

                            ;
                        }
                    });

                };
            });

        });
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="modify">修改模板</a>
        <a class="layui-btn layui-btn-xs" lay-event="execution">执行模板</a>
    </script>
    <script type="text/html" id="reviewer">
        {{# if(d.reviewer!=null){ }}
        <div>{{d.reviewer.name}}</div>
        {{# } }}
        {{# if(d.reviewer==null){ }}
        <div>-</div>
        {{# } }}
    </script>
</head>
<body>
<div id="app">
    <template>
    <button class="layui-btn layui-btn-sm" @click="dialogFormVisible=!dialogFormVisible">新建工作模板</button>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <el-dialog title="新建模板" :visible.sync="dialogFormVisible" width="400px" top="3%">
        <el-form  ref="form" :model="workTemplate" label-width="90px" style="width: 310px">

            <el-form-item label="模板编号">
                <el-input v-model="workTemplate.number"></el-input>
            </el-form-item>

            <el-form-item label="模板名称">
                <el-input v-model="workTemplate.content"></el-input>
            </el-form-item>

            <el-form-item label="模板类型">
                <el-select filterable  v-model="workTemplate.templateType" placeholder="请选择活动区域">
                    <el-option v-for="item in templateTypes"
                               :label="item.value"
                               :value="item.key"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="起草人">
                <el-input disabled v-model="user.name"></el-input>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-date-picker disabled v-model="workTemplate.inputTime" type="date"></el-date-picker>
            </el-form-item>

            <el-form-item label="版本号">
                <el-input disabled v-model="workTemplate.version"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="workTemplate.remark"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
    </template>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementUI/index.js"></script>
<script src="/vue/axios.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data:{
            dialogFormVisible: false,
            workTemplate: {
                id:'',
                reviewerId:'',
                reviewer:null,
                drafterId:'',
                drafter:null,
                name:'',
                content:'',
                number:'',
                version:'0.0.1',
                inputTime:new Date(),
                updateTime:'',
                templateType:'',
                templateTypeName:'',
                enable:true,
                remark:''
            },
            templateTypes: [],
            user: {
                name:'',
            }
        },
        methods: {
            onSubmit() {
                axios.post(
                    '/work-template/uploadNewTemplate',
                    this.workTemplate
                ).then(res => { if (res.data == 0){
                    this.$message('创建成功');
                    this.dialogFormVisible=false;

                }} )
            }
        },
        created(){
            axios.get(
                '/work-template/getTemplateTypes',
            ).then(res => { this.templateTypes = res.data; } )
            axios.get(
                '/work-template/getUser',
            ).then(res => {
                this.user.name = res.data.name;
                this.workTemplate.drafterId = res.data.id;
            } )
        }

    })

</script>
</html>